<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-10-26 15:14:16
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-11-08 16:53:34
 * @Description:
 *
-->

<template>
  <el-dialog
    class="scaling-group-dialog"
    title="创建弹性伸缩组"
    :visible="show"
    width="700px"
    top="15vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <!-- 表单 -->
    <el-form
      ref="addGroupForm"
      class="add-form"
      :rules="rules"
      :model="form"
      label-width="auto"
      size="medium"
    >
      <!-- <el-form-item label="集群" prop="clusterName">
        <el-input
          v-model="form.clusterName"
          placeholder="请选择集群"
        />
      </el-form-item> -->
      <el-form-item label="选择云商" prop="provider">
        <el-select
          v-model="form.provider"
          placeholder="请选择云商"
          style="width: 100%"
          @change="cloudVendorChange"
        >
          <el-option
            v-for="item in cloudVendors"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择集群" prop="clusterName">
        <el-select
          v-model="form.clusterName"
          placeholder="请选择集群"
          style="width: 100%"
          @change="clusterChange"
        >
          <el-option
            v-for="item in clustersOptions"
            :key="item.k8sClusterName"
            :label="item.k8sClusterName"
            :value="item.k8sClusterName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择云资源" prop="label" class="half left">
        <el-select
          v-model="form.label"
          placeholder="请选择云资源"
          style="width: 100%"
        >
          <el-option
            v-for="item in labelOptions"
            :key="item.microSvcId"
            :label="item.microServiceName"
            :value="item.microSvcId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="虚机移除原则" prop="deletePolicy" class="half">
        <el-select
          v-model="form.deletePolicy"
          placeholder="请选择虚机移除原则"
          style="width: 100%"
        >
          <el-option
            v-for="item in deletePolicyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="弹性伸缩组名称" prop="groupName">
        <el-input v-model="form.groupName" placeholder="请输入弹性伸缩组名称" />
      </el-form-item>
      <el-form-item label="伸缩配置" prop="configId">
        <el-select
          v-model="form.configId"
          placeholder="请选择伸缩配置"
          style="width: 100%"
        >
          <el-option
            v-for="item in configOptions"
            :key="item.configId"
            :label="item.configName"
            :value="item.configId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="期望VM数" prop="expectNum" class="half left">
        <el-input
          v-model="form.expectNum"
          placeholder="请输入期望VM数"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="最小VM数" prop="minNum" class="half">
        <el-input-number
          v-model="form.minNum"
          :min="1"
          label="请输入最小VM数"
          :disabled="true"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancelClick">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :loading="confirmLoading"
        @click="confirmClick"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addScalingGroup,
  getScalingConfigList,
  getK8sClusterInfos,
  getK8sClusterNodeInfos
} from '@/api/cnap/hybrid-cloud'
import { getAllMicroSvcName } from '@/api/cnap/self-intelligence-ops'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'

export default {
  name: 'ScalingGroupDialog',
  mixins: [cloudVendorHandle],
  props: {
    // 显示
    show: {
      type: Boolean,
      default: false
    },
    // 传递数据
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      clustersOptions: [],
      // 云资源标签
      labelOptions: [],
      // 移除原则
      deletePolicyOptions: [
        {
          label: '先创建先移除原则',
          value: 'FIFO'
        },
        {
          label: '后创建先移除原则',
          value: 'LIFO'
        }
      ],
      configOptions: [], // 伸缩配置列表
      // 表单
      form: {
        provider: '', // 云商
        clusterName: '', // 集群
        label: '', // 选择云资源
        deletePolicy: '', // 虚机移除原则
        groupName: '', // 弹性伸缩组名称
        expectNum: '', // 期望VM数
        minNum: 1, // 最小VM数
        configId: '' // 伸缩配置
      },
      // 校验规则
      rules: {
        // 云商名
        provider: [
          { required: true, message: '请选择云商', trigger: 'change' }
        ],
        // 集群名
        clusterName: [
          { required: true, message: '请选择集群', trigger: 'change' }
        ],
        // 云资源标签
        label: [{ required: true, message: '请选择云资源', trigger: 'change' }],
        // 移除原则
        deletePolicy: [
          { required: true, message: '请选择虚机移除原则', trigger: 'change' }
        ],
        // 弹性伸缩组名称
        groupName: [
          {
            required: true,
            message: '请输入弹性伸缩组名称',
            trigger: 'change'
          }
        ],
        minNum: [{ required: true, message: '请输入最小VM数' }], // 最小VM数
        // 期望VM数
        expectNum: [
          { required: true, message: '请输入期望VM数', trigger: 'change' }
        ],
        // 伸缩配置
        configId: [
          { required: true, message: '请选择伸缩配置', trigger: 'change' }
        ]
      },
      confirmLoading: false
    }
  },
  computed: {
    /**
     * @description: 最大VM数的上限
     * @return {*}
     */
    maxNumUpper() {
      // 找到当前伸缩配置
      const index = this.configOptions.findIndex((item) => {
        return item.configId === this.form.configId
      })
      // 最大值上限
      // 不能超过当前vm数量+伸缩配置内选择vm数量
      return (
        this.form.expectNum +
        (index > -1 ? this.configOptions[index].cloudResourceIds.length : 0)
      )
    },
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.form.provider
    }
  },
  created() {
    // this.getScalingConfig()
  },
  methods: {
    /**
     * @description: 集群选择后获取配置
     * @return {*}
     */
    clusterChange() {
      this.getScalingConfig()
      this.getClusterNodeNum()
      this.getAllMicroSvc()
    },
    /**
     * @description: 获取集群下微服务
     * @return {*}
     */
    getAllMicroSvc() {
      getAllMicroSvcName({
        clusterName: this.form.clusterName
      }).then((res) => {
        this.labelOptions = Array.isArray(res.data) ? res.data : []
      })
    },
    /**
     * @description: 获取集群下node数
     * @return {*}
     */
    getClusterNodeNum() {
      getK8sClusterNodeInfos({
        ...this.cloudVendorParams, // 云商参数
        k8sClusterName: this.form.clusterName, // 集群
        pageNo: 1,
        pageSize: 1
      }).then((res) => {
        this.form.expectNum = res.data ? res.data.totalNum || '' : ''
      })
    },
    /**
     * @description: 云服务商切换
     * @param {*} val
     * @return {*}
     */
    cloudVendorChange(val) {
      this.form.clusterName = '' // 集群置空
      this.clustersOptions = [] // 集群选项置空
      getK8sClusterInfos({
        ...this.cloudVendorParams, // 云商参数
        pageNo: 1,
        pageSize: 100
      })
        .then((res) => {
          this.clustersOptions = Array.isArray(res.data.result)
            ? res.data.result
            : []
        })
        .catch((err) => {
          console.log(err)
          // 异常处理
          this.clustersOptions = []
        })
    },
    /**
     * @description: 获取伸缩配置
     * @return {*}
     */
    getScalingConfig() {
      // 请求
      getScalingConfigList({
        provider: this.cloudVendorParams.cloudVendor,
        accountName: this.cloudVendorParams.accountName,
        clusterName: this.form.clusterName,
        pageNum: 1,
        pageSize: 20
      }).then((res) => {
        this.configOptions =
          res.data && Array.isArray(res.data.result) ? res.data.result : []
      })
    },
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      // 校验
      this.$refs.addGroupForm.validate((valid, obj) => {
        if (valid) {
          this.confirmLoading = true
          // 添加
          const params = Object.assign({}, this.form, {
            provider: this.cloudVendorParams.cloudVendor,
            accountName: this.cloudVendorParams.accountName
          })
          addScalingGroup(params)
            .then((res) => {
              this.$emit('update:show', false)
              this.$emit('success') // 事件回调
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel') // 事件回调
    }
  }
}
</script>

<style lang="less" scoped>
.scaling-group-dialog {
  .add-form {
    .half {
      display: inline-block;
      width: calc(50% - 5px);
      &.left {
        margin-right: 10px;
      }
    }
  }
}
</style>
